<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		    //任务七
			<h1>JavaScript 事件</h1>
		    <button onclick="this.innerHTML=Date()">时间是？</button>
			<hr/>
			
			//任务八
			<h1>JavaScript 变量</h1>
			<p id="demo"></p>
			<script>
				//创建并显示变量
				var car="porsche"
				document.getElementById("demo").innerHTML=car;
			</script>
			<hr />
			
			//任务九
			<h1>JavaScript 对象</h1>
			<p id="demo1"></p>
			<script>
				//创建对象
				var car={type:"porsche",model:"911",color:"white"};
				//显示对象中的数据
				document.getElementById("demo1").innerHTML=car.model;
			</script>
			<hr />
			
			//任务十
			<h1>JavaScript 点击更换背景颜色</h1>
			<script>
			function changecolor(color) {
				document.bgColor = color;
			}
			//自定义改变背景颜色
			function customcolors(color) {
				document.bgColor = prompt("请你自定义颜色", color);
			}
			</script>
			<input type="button" onclick="changecolor('red')" value="设为红色" />
			<input type="button" onclick="changecolor('yellow')" value="设为黄色" />
			<input type="button" onclick="changecolor('blue')" value="设为蓝色" />
			<input type="button" onclick="customcolors()" value="设为自定义颜色" />
			<hr />
			
			//任务十一
			<h1>JavaScript 关闭一个浏览器窗口</h1>
			<script>
				function NVGClose() {
					window.opener = null;
					window.open('', '_self');
					window.close();
				}
			</script>
			<a href="javascript:self.close()">关闭窗口</a>
			<input type="button" onclick="NVGClose()" value="关闭窗口" />
			<hr />
			
			//任务十二
			<h1>JavaScript 用户登录表单验证</h1>
			<script>
				//验证用户名
					function valname() {
						var username = document.getElementById("username");
						var userErr = document.getElementById("userErr");
				
						if (username.value.replace(/\s/g, "") == "") {
								userErr.innerHTML = "请输入用户名";
								return false;
						} else {
							username.value = username.value.replace(/\s/g, "");//除去空格
							userErr.innerHTML = "";
							return true;
						}
					}
				//验证密码
					function valpass() {
						var password = document.getElementById("password");
						var passErr = document.getElementById("passErr");
				
						if (password.value.replace(/\s/g, "") == "") {
							passErr.innerHTML = "请输入密码";
							return false;
						} else {
							password.value = password.value.replace(/\s/g, "");//除去空格
							passErr.innerHTML = "";
							return true;
						}
					}
			</script>
			<table>
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="text" name="username" id="username" required="required" onblur="valname();"><span
								id="userErr"></span></td>
					</tr>
					<tr>
						<td><label for="password">密　码:</label></td>
						<td><input type="password" name="password" id="password" required="required" onblur="valpass();"><span
								id="passErr"></span></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" value="登录" ></a></td>
					</tr>
				</table>
				<hr />
				
				<h1>JavaScript 用户删除操作</h1>
				<script>
				//是否删除对话框
						function judge() {
							if (confirm('是否删除?')) {
								alert('用户已删除')
							} else {
								alert('删除失败')
							}
						}
				</script>
					<input type="button" onclick="judge()" value="按钮" />
	</body>
</html>
